<template>
    <picker
        @columnchange="columnchange"
        @change="change"
        :range="array"
        :value="value"
        range-key="label"
        mode="multiSelector">
        <slot></slot>
    </picker>
</template>

<script>
import citys from '@/utils/citys'
export default {
    props: {
        showAll: {
            type: Boolean,
            default: false
        },
        showArea: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            array: [],
            value: [0,0,0]
        }
    },
    mounted() {
        if(this.showAll) {
            let allItem = {
                label: '全部', value: '全部',
                children: [
                    { label: '全部', value: '全部', 
                        children: [ {label: '全部', value: '全部'} ] 
                    }
                ]
            }
            citys.unshift(allItem)
        }
        console.log(citys);
        this.array[0] = citys
        this.array[1] = citys[0].children
        if(this.showArea) {
            this.array[2] = citys[0].children[0].children
        }
        this.$forceUpdate()
    },
    methods: {

        newArrFn(arr){
            return arr.reduce((acc, cur) => {
                if (Array.isArray(cur.children)) {
                    const copyCur = { ...cur} 
                    delete copyCur.children
                    return acc.concat(copyCur,this.newArrFn(cur.children))
                } else {
                    return acc.concat(cur)
                }
            }, [])
        },


        columnchange(e) {
            let column = e.target.column
            let value = e.target.value
            console.log(value);
            if(column == 0) {
                let arrCol1 = this.array[0][value].children
                arrCol1 = this.showAll ? [{ label: '全部', value: '全部', children: [{ label: '全部', value: '全部' }] }, ...arrCol1] : arrCol1 
                this.array[1] = arrCol1
                if(this.showArea) {
                    let arrCol2 = this.array[0][value].children[0].children
                    arrCol2 = this.showAll ? [{ label: '全部', value: '全部' }, ...arrCol2] : arrCol2 
                    this.array[2] = arrCol2
                }
                this.value = [value, 0, 0]
            } else if(column == 1) {
                if(this.showArea) {
                    let arrCol2 = this.array[1][value].children
                    arrCol2 = this.showAll ? [{ label: '全部', value: '全部' }, ...arrCol2] : arrCol2 
                    this.array[2] = arrCol2
                    this.value = [this.value[0], value, 0]
                }
            }
            this.$forceUpdate()
        },
        change(e) {
            let value = e.target.value
            console.log(e);
            let province = this.array[0][value[0]].label
            let city = this.array[1][value[1]].label
            city = city == '市辖区' ?  (this.showAll ? '全部' : province) : city
            if(this.showArea) {
                let area = this.array[2][value[2]].label
                this.$emit('change', { province, city, area })
            } else {
                this.$emit('change', { province, city})
            }
        }
    }

}
</script>

<style lang="less" scoped>
    picker{
        width: 100%;
    }
    .city_picker{
        /deep/ uni-picker-view-wrapper{
            &:last-child{
                display: none;
            }
        }
    }

</style>
